import { useContext } from "react"
import type { TableListProps } from "../../ListType"
import './TableListStyle.css'
import context from "../../context/Context"

function TableList (props: TableListProps) {

  // #region 变量声明
  const { dispatch } = useContext(context)
  // #endregion

  // #region 函数
  function edit (index: number) {
    props.show()
    dispatch({
      type: 'edit',
      value: props.list[index]
    })
  }
  // #endregion

  // #region Hooks

  // #endregion

  return (
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" name="checkbox" /></th>
          <th>序号</th>
          <th>id</th>
          <th>用户名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>密码</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      { props.list.length ?
        (
          <tbody>
            { props.list.map((item, index) => (
              <tr key={ item.id }>
                <td><input type="checkbox" name="checkbox" /></td>
                <td>{ item.no }</td>
                <td>{ item.id }</td>
                <td>{ item.username }</td>
                <td>{ item.age }</td>
                <td className={ item.sex === 1 ? 'man' : '' }>{ item.sex === 1 ? '男' : '女' }</td>
                <td>{ item.password }</td>
                <td>{ item.email }</td>
                <td><button onClick={ () => edit(index) }>编辑</button><button>删除</button></td>
              </tr>
            )) }
          </tbody>
        ) : (
          <tbody className="empty"><tr><td colSpan={ 9 }>暂无数据</td></tr></tbody>
        ) }
    </table>
  )
}

export default TableList
